import { useState, useContext } from 'react'
import { Text, Button, StyleSheet, TouchableOpacity, View, Image, Switch } from 'react-native'

import { useAppDataDispatch, useAppData } from '../AppDataContext'

let num = 1;

export default function Setting() {
  const { theme } = useAppData()
  const [page, setPage] = useState(1)
  const dispatch = useAppDataDispatch()
  const isEnabled = theme === 'light'

  const toggleSwitch = (val: boolean) => {
    dispatch({ type: 'changeTheme', value: val ? 'light' : 'dark' })
  }
  const handleAdd = () => {
    setPage(page => page + 1)
    setPage(page => page + 1)
  }
  num++
  return (
    <View style={styles.container}>
      <Text>{num}</Text>
      <Text style={styles.title}>主题色</Text>
      <View style={styles.box}>
        <Text>light</Text>
        <Switch
          value={isEnabled}
          onValueChange={toggleSwitch}
          trackColor={{false: '#767577', true: '#81b0ff'}}
          thumbColor={isEnabled ? '#f5dd4b' : '#f4f3f4'}
        />
      </View>
      <Text>{page}</Text>
      <Button title="增加" onPress={handleAdd} />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start'
  },
  title: {
    fontSize: 24,
    color: '#333'
  },
  box: {
    paddingVertical: 15,
    alignItems: 'center',
    flexDirection: 'row',
  },
  button: {
    flex: 1,
    alignSelf: 'flex-end',
    alignItems: 'center',
    flexDirection: "row"
  },
  text: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#fff',
    marginHorizontal: 5
  },
  image: {
    width: 100,
    height: 100,
    resizeMode: 'contain',
  },
})